<script>
import GliMenu from '@/common/menu'
import GliMenuTop from '@/common/menu/Menu'
import GliMenuItem from '@/common/menu/MenuItem'
import { mapState } from 'vuex'
import { logout } from 'services/x-start/mgr/user'

export default {
  components: {
    GliMenu,
    GliMenuTop,
    GliMenuItem,
  },
  data() {
    return {
      isCollapse: false,
    }
  },
  computed: {
    ...mapState({
      typeList: (state) => state.menuSport,
      authority: (state) => state.authority,
    }),
  },
  methods: {
    MenuCollapse() {
      this.isCollapse = !this.isCollapse
      var node = document.querySelector('#content')
      if (this.isCollapse) {
        node.classList.add('mini')
      } else {
        node.classList.remove('mini')
      }
    },
    menuFoldHandler() {
      this.MenuCollapse()
    },
    getAuthority(type) {
      if (!type) {
        return Object.entries(this.authority).length
      }
      return this.authority[type]
    },
    logout() {
      this.$confirm('确认是否退出？')
        .then((_) => {
          logout().then((res) => {
            location.href =
              process.env.NODE_ENV == 'production' ? '/dist/' : '/'
          })
        })
        .catch((_) => {})
    },
    toggleShow() {
      this.isCollapse = !this.isCollapse
    },
  },
}
</script>


<template lang="pug">
.menu(:class='{ collLeft: isCollapse }', ref='menu', v-if='typeList.length')
  gli-menu(
    @foldHandler='menuFoldHandler',
    :menuRecreate='false',
    :keepOneOpen='true',
    :default-active='$route.path',
    :router='true',
    :collapse='isCollapse',
    background-color='#333744',
    text-color='#fff',
    active-text-color='#FF6D60'
  )
    GliMenuTop(txt='首页', index='/wms/home', iconClass='icon-menu-shouye')
    GliMenuTop(txt='分类数据', iconClass='icon-menu-fenlei')
      GliMenuItem(
        v-for='item in typeList',
        :key='item.id',
        iconClass='icon-menu-leibie',
        :txt='item.name',
        :children='item.children',
        :index='"/wms/analysis/" + item.id'
      )
        ul.childList(v-if='item.children.length')
          li(
            v-for='items in item.children',
            :class='{ active: $route.path == `/wms/analysis/${items.id}` }',
            :key='items.id',
            @click='$go("/wms/analysis/" + items.id)'
          ) {{ items.name }}
    GliMenuTop(txt='视频列表', index='/wms/show', iconClass='icon-menu-jiankong')
    //- GliMenuTop(
    //-   txt='赛事活动',
    //-   index='/wms/activity',
    //-   iconClass='icon-menu-saishihuo'
    //- )
    //- GliMenuTop( txt="排行榜" index="/wms/ranking" iconClass="icon-menu-paihang")
    GliMenuTop(txt='管理中心', v-if='getAuthority()', iconClass='icon-menu-peizhi')
      GliMenuItem(
        iconClass='icon-menu-shebei',
        txt='设备管理',
        index='/wms/device',
        v-if='getAuthority("设备管理")'
      )
      //- GliMenuItem(
      //-   iconClass='icon-menu-saishi',
      //-   txt='赛事管理',
      //-   index='/wms/match',
      //-   v-if='getAuthority("赛事管理")'
      //- )
      GliMenuItem(
        iconClass='icon-menu-yonghu',
        txt='用户管理',
        index='/wms/user',
        v-if='getAuthority("用户管理")'
      )
      GliMenuItem(
        iconClass='icon-menu-juese',
        txt='角色管理',
        index='/wms/role',
        v-if='getAuthority("角色管理")'
      )
      GliMenuItem(
        iconClass='icon-menu-tiyu',
        txt='体育项目管理',
        index='/wms/sport',
        v-if='getAuthority("体育项目管理")'
      )
      GliMenuItem(
        iconClass='icon-menu-tiyu',
        txt='场景管理',
        index='/wms/scene',
        v-if='getAuthority("场景管理")'
      )
      GliMenuItem(iconClass='el-icon-s-tools', txt='展示管理', index='/wms/spread')
  el-button.btn.el-icon-circle-close(
    size='mini',
    type='danger',
    @click='logout()'
  ) 退出
  el-button.leftBtn.el-icon-s-fold(
    size='mini',
    type='danger',
    circle,
    @click='toggleShow'
  )
</template>


<style lang="stylus" scoped>
.childList
  color #fff
  background-color #484848
  line-height 35px
  li
    padding-left 50px
    border-bottom 1px solid #000
    box-sizing border-box
    font-size 12px
    &.active
      color #ff6d60
    &:last-child
      border none
.leftBtn
  display none
.btn
  position absolute
  left 0
  right 0
  bottom 20px
  margin auto
  z-index 22
  width 50%
.menu
  position fixed
  width 200px
  top 0
  bottom 0
  z-index 300
  transition left 0.3s ease-in-out
  .el-menu
    width 200px
    height 100%
    overflow-y auto
    overflow-x hidden
    .el-menu-item
      padding-left 30px !important
    .el-submenu
      max-width 200px
      .el-submenu__title
        font-size 16px
        height 44px
        line-height 44px
        i
          font-size 16px
          margin-right 6px
.menu .el-menu
  width 200px
  height 100%
  overflow-y auto
  overflow-x hidden
.menu .el-menu .el-submenu
  max-width 200px
.collapse
  background #565E6E
  height 50px
  max-width 200px
  text-align center
  line-height @height
  color #ffffff
  font-size 16px
  cursor pointer
  user-select none
  i
    font-size 15px
.el-menu-item
  i
    margin-right 10px
    &:before
      font-size 16px
      display inline-block
@media screen and (max-width 650px)
  .menu
    left -200px
    &.collLeft
      left 0
  .btn
    position absolute
    left 50%
    bottom 20px
    margin-left -34px
    z-index 22
  .leftBtn
    position absolute
    display block
    right -40px
    top 7px
</style>
